<template>
	<view v-if="pageShow">
		<!--免费咨询 -->
		<u-popup :show="mfshow" mode="center" @close="mfclose" :round="10">
			<view class="mainpadding">
				<view class="bigtext zhonghei fonweight textcenter">免费咨询</view>
				<input class="inputs margin_top5" placeholder="请输入姓名" type="text" v-model="username"/>
				<input class="inputs margin_top" placeholder="请输入电话" type="number" v-model="tel"/>
				<textarea class="margin_top textarea" placeholder="请输入需求详情" v-model="des"></textarea>
				<view class="flexbetween margin_top5">
					<view class="quxbtn flexcenter" @click="mfclose">取消</view>
					<view class="tjbtn flexcenter" @click="zxSubmit">提交</view>
				</view>
			</view>
		</u-popup>
		<!-- 租车方案 -->
		<u-popup :show="zcshow" @close="zcclose" :round="20">
			<view class="mainpadding">
				<view class="bigtext zhonghei fonweight textcenter">{{dataAll.car_type==1?'租车':dataAll.car_type==2?'买车':"自营"}}方案</view>
				<view class="titletext margin_top5 zhonghei fonweight">用车方式</view>
				<view class="flexleft">
					<view class="yixxbtn margin_top2 margin_right flexcenter">{{dataAll.car_type==1?'租车':dataAll.car_type==2?'买车':"自营"}}</view>
				</view>
				
				<template v-if="dataAll.spu.length">
					<view class="" v-for="item in dataAll.spu" :key="item.id">
						<view class="titletext margin_top4 zhonghei fonweight">{{item.name}}</view>
						<view class="flexleft flex_wrap">
							<view class=" margin_top2 flexcenter" v-for="ite in item.item" :key="ite" @click="checkgg(item,ite)" :class="item.selecttext==ite?'yixxbtn':'wxzxbtn'" >{{ite}}</view>
						</view>
					</view>
					
				</template>
				
				<view class="flexbetween margin_top4">
					<view class="flexleft">
						<view class="margin_right4">
							<view class="strongtext xiaohui">月租</view>
							<view class="ershib fonweight xiaocheng margin_top1">￥{{mouth_price || "0.00"}}</view>
						</view>
						<view class="">
							<view class="strongtext xiaohui">押金</view>
							<view class="ershib fonweight xiaocheng margin_top1">￥{{price || "0.00"}}</view>
						</view>
					</view>
					<view class="xhbtnty" @click="ggclose">预定车辆</view>
				</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 140rpx;">
			<u-swiper radius="0" :list="dataAll.images_text" keyName="image_text" circular height="327"></u-swiper>
			<view class="mainpadding">
				<view class="ffffff radius mainpadding">
					<view class="titletext zhonghei fonweight">{{dataAll.name}}</view>
					<view class="strongtext xiaohui margin_top">{{dataAll.bq}}</view>
					<view class="xhbtn margin_top flexcenter" @click="tzcl(listid)">车辆参数</view>
				</view>
				<view class="ffffff radius flexbetween mainpadding_top">
					<view class="titletext zhonghei fonweight">评价</view>
					<view class="flexright" @click="tzckpj">
						<view class="xiaohui strongtext ">查看全部评论</view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view class="ffffff radius mainpadding margin_top">
					<view class="titletext zhonghei fonweight">常见问题</view>
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="item in cjwtTypeIndexArr" :key="item.id" @click="cjwt_type_id=item.id;init()">
							<view class=" margin_top2 margin_right2" :class="cjwt_type_id==item.id?'yixbtn':'wxzbtn'" >{{item.name}}</view>
						</view>
					</scroll-view>
					<view class="xiahuaxian" v-for="item in list.data" :key="item.id">
						<view class="flexleft margin_top">
							<view class="huandian margin_right2"></view>
							<view class="titletext zhonghei yhxk">{{item.name}}</view>
						</view>
						<view class="flextop margin_top ">
							<view class="lvdian "></view>
							<view class="ershil xiaohui" style="width: 95%;">
								{{item.des}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding flexbetween">
			<view class="zbbtn" @click="zxfn()">免费咨询</view>
			<view class="xhbtnty" @click="ydfn()">预定车辆</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				zcshow: false,
				mfshow: false,
				listid: "",
				dataAll: {},
				pageShow: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				cjwtTypeIndexArr: [],
				cjwt_type_id: "",
				username: "",
				tel: "",
				des: "",
				guigeflag:false,
				mouth_price:"",
				price:"",
				sku_id:""
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
			this.cjwtTypeIndex()
		},
		watch: {
			'dataAll.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.price = item.price //价格赋值
							this.mouth_price = item.mouth_price //价格赋值
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			zxfn(){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				this.mfshow = true
			},
			ydfn(){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				this.zcshow = true
			},
			ggclose() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if (!this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				this.show = false
				let data = {
					car_id: this.listid,
					sku_id: this.sku_id,
				}
				uni.navigateTo({
					url: '/pages_index/querenddzuche?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 跳转查看评价
			tzckpj(){
				uni.navigateTo({
					url: '/pages_index/pingjiajiudian?type=4&id='+this.listid
				})
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			zxSubmit(){
				if(this.username==""){
					httpRequest.toast("请输入姓名")
					return false
				}
				if(this.tel==""){
					httpRequest.toast("请输入电话")
					return false
				}
				if(this.des==""){
					httpRequest.toast("请输入需求详情")
					return false
				}
				this.mfshow = false
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/carcl/addCarZx', 'GET', {
					car_id: this.listid,
					username: this.username,
					tel: this.tel,
					des: this.des,
				}, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.username = ""
						this.tel = ""
						this.des = ""
					}
				})
			},
			getDetail() {
				httpRequest.request('/api/carcl/carDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					res.data.spu.forEach(current => {
						current.item = current.item.split(",")
						this.$set(current, "selecttext", "")
					})
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			cjwtTypeIndex() {
				httpRequest.request('/api/index/cjwtTypeIndex', 'GET', {}, false, false, true).then(res => {
					this.cjwtTypeIndexArr = res.data
					this.cjwt_type_id = res.data[0].id
					this.init()
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					cjwt_type_id: this.cjwt_type_id,
				}
				let url = '/api/index/cjwtIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			zcclose() {
				this.zcshow = false
			},
			mfclose() {
				this.mfshow = false
			},
			// 跳转车辆参数
			tzcl(id) {
				uni.navigateTo({
					url: '/pages_index/chengliancs?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tjbtn {
		width: 303rpx;
		height: 96rpx;
		background: #FF8505;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 800;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.quxbtn {
		width: 303rpx;
		height: 96rpx;
		background: #EAEAEA;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 800;
		font-size: 28rpx;
		color: #000000;
	}

	.textarea {
		background: #F3F3F3;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 30rpx;
	}

	.inputs {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #E8E8E8;
		padding: 25rpx 30rpx;
		width: 570rpx;
	}

	.wxzxbtn {
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		padding: 25rpx 50rpx;
		background: #F7F9FA;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}

	.yixxbtn {
		font-weight: 500;
		font-size: 28rpx;
		color: #FF8505;
		padding: 25rpx 50rpx;
		background: #fff3e6;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}

	.zbbtn {
		font-weight: 500;
		font-size: 30rpx;
		color: #FF8505;
		width: 338rpx;
		height: 80rpx;
		background: rgba(255, 147, 65, 0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #FF8505;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiahuaxian:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.lvdian {
		width: 10rpx;
		height: 10rpx;
		background: #2D9070;
		border-radius: 50%;
	}

	.huandian {
		width: 10rpx;
		height: 10rpx;
		background: #FF8505;
		border-radius: 50%;
	}

	.wxzbtn {
		width: 118rpx;
		height: 53rpx;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yixbtn {
		width: 118rpx;
		height: 53rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF8505;
		font-weight: 500;
		font-size: 24rpx;
		color: #FF8505;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xhbtn {
		width: 135rpx;
		height: 58rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF8505;
		font-weight: 500;
		font-size: 24rpx;
		color: #FF8505;
	}
</style>